<template>
  <div v-show="editShow">
    <div class="container">
      <el-row :gutter="20">
        <div class="clearfix">
          <div class="crumbs">
            <i class="el-icon-back"></i>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="btn-save">
            <el-button type="primary" @click="addsaveClick('formData')">确 定</el-button>
          </div>
        </div>
        <div class="form-box">
          <el-form ref="formData" :model="formData" :rules="rules"  label-width="140px" class="eidt-el-form">
            <el-form-item label="模板类型" prop="isEmail">
              <el-select 
                    placeholder="模板类型"
                    clearable
                    v-model="formData.isEmail"
                    class="el-input-position">
                    <el-option  label="邮件" value="1"></el-option>
                    <el-option  label="短信" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模板标题" prop="title">
              <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item label="发送人" prop="author">
              <el-input v-model="formData.author" ></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input type="textarea" v-model="formData.content"  ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditInvite",
  data() {
    return {
      //角色列表数据
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        isEmail: [{ required: true, message: "模板类型不能为空", trigger: "blur" }],
        author: [{ required: true, message: "发送人不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
      defaultProps: {
        label: "name"
      },
      dialogVisible: false,
      formData: {
        projectId:localStorage.getItem('project_Id'),
        title: "",
        isEmail: "",
        author:"",
        content:""
      },
      inviteId: "",
    };
  },
  props:{
    editShow: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object
    }
  },
  watch: {
    editData: function() {
      const item = this.editData;
      this.formData = item;
      this.formData.isEmail=this.editData.isEmail.toString()
      this.inviteId = item.inviteId;
    }
  },
  created(){
    
  },
  methods: {
    addsaveClick(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.inviteId == "") {
            this.$axios.post('/Invite/',this.formData)
              .then(res =>{
                if (res.data.hasError == false) {
                  this.$message.success("添加成功！");
                  this.goBack();
                }
              })
          }else {
            this.$axios.put(`/Invite/${this.inviteId}`,this.formData)
              .then(res =>{
                if (res.data.hasError == false) {
                  this.$message.success("修改成功！");
                  this.goBack();
                }
              })
          }
          this.dialogVisible = false;
        }
      });
    },
    closeVisible(formData){
      this.$refs[formData].resetFields();
      this.dialogVisible = false
    },
    goBack() {
      this.$emit("backFunStu");
      this.$refs['formData'].resetFields();
      this.inviteId="";
    },
  }
};
</script>
<style lang="scss" scope>
    .img-box{float: right;width:400px ;position: absolute;top: 80px;right: 0px;}
    img{width: 100%;}
    #qrcode{position: absolute;}
</style>